vue学习笔记之v

您所在的位置:网站首页 vue v-if和v-show的区别 vue学习笔记之v

vue学习笔记之v

2022-05-05 17:28| 来源: 网络整理| 查看: 265

v-if vs v-show

v-if 是“真正的”条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

v-if 也是惰性的:如果在初始渲染时条件为假,则什么也不做——直到条件第一次变为真时,才会开始渲染条件块。

相比之下, v-show 就简单得多——不管初始条件是什么,元素总是会被渲染,并且只是简单地基于 CSS 进行切换。

一般来说, v-if 有更高的切换开销,而 v-show 有更高的初始渲染开销。因此,如果需要非常频繁地切换,则使用 v-show 较好;如果在运行时条件不太可能改变,则使用 v-if 较好。

if show toggle export default { name: 'app', data() { return { isIf : true, ifShow : true, loginType : "username" } }, methods: { toggleShow : function(){ this.ifShow = this.ifShow ? false : true; this.isIf = this.isIf ? false : true; } } }

看chrom控制台能更明显的看出来

查看图片

查看图片

对比可以看出v-if直接从代码中删除了,v-show只是通过display来切换状态,因此建议频繁切换的话用v-show比较好

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持积木网。

Vue-cli创建项目从单页面到多页面的方法 对于某些项目来说,单页面不能很好的满足需求,所以需要将vue-cli创建的单页面项目改为多页面项目。需要修改以下几个文件:1、下载依赖glob$npminstall

用vue构建多页面应用的示例代码 最近一直在研究使用vue做出来一些东西,但都是SPA的单页面应用,但实际工作中,单页面并不一定符合业务需求,所以这篇我就来说说怎么开发多页面

VUE页面中加载外部HTML的示例代码 前后端分离,后端提供了接口。但有一部分数据,比较产品说明文件,是存在其他的服务器上的。所以,在页面显示的时候,如果以页面内嵌的形式显



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3